<template>
  <div class="headerbox">
    <div class="header">
        <div class="headerL">
            <a onclick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
        </div>
        <div class="headerC">
            <p>优惠券详情</p>
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="h50"></div>
<div class="coupon_detail">
    <div class="coupon_info">
        <div class="left">
            <div class="left_top">
                <div>
                    ￥<span>{{couponinfo.rate*10}}</span>折
                </div>
                <div class="top_info">
                    <div>{{couponinfo.title}}</div>
                    <div>COUPON</div>
                </div>
            </div>
        </div>
        <div class="receive">
            <button class="receive_btn" v-show="couponinfo.receive_text">已领取</button>
            <button class="right_btn" v-show="!couponinfo.receive_text" @click="receive">立即领取</button>
        </div>
    </div>
    <div class="coupon_prompt">
        <div class="prompt_title">温馨提示：</div>
        <div><span>•</span>每人限领1张</div>
        <div><span>•</span>仅限量{{couponinfo.total}}张，赶快领取！</div>
        <div><span>•</span>领取后{{couponinfo.createtime_text}}至{{couponinfo.endtime_text}}有效</div>
    </div>
</div>
<Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const cid = ref(proxy.$route.query.cid ?? 0)
const couponinfo=ref()

// 挂载前加载出数据
onBeforeMount(()=>{
  getCouponInfo()
})
const getCouponInfo = async ()=>{
  let result=await Api.CouponInfo({couid:cid.value,busid:LoginUser.id})
  if (result.code == 1) {
    couponinfo.value=result.data;
    console.log(couponinfo.value);
  }
}


// 领取优惠券
const receive = async ()=>{
  let result=await Api.Receive({cid:cid.value,busid:LoginUser.id})
  if (result.code == 1) {
    showSuccessToast({
            message: result.msg,
            onClose: function() {
              window.location.reload()
            }
        });
  }
}
</script>

<style scoped>
@import url('/assets/css/coupon-info.css');
body{
  background-color: #f4f6f8;
}
</style>